import { FC } from 'react'
import CountUp from 'react-countup'

export type DisplayBoxProps = {
  label?: string
  prevCount: number
  endCount: number
  onCountUpEnd?: () => void
}

const DisplayBox: FC<DisplayBoxProps> = ({
  label,
  prevCount,
  endCount,
  onCountUpEnd
}) => {
  return (
    <div style={{ width: '121px' }}>
      <div className="dr_count_num">
        <CountUp
          start={prevCount}
          end={endCount}
          duration={1}
          onEnd={onCountUpEnd}
        />
      </div>
      <div className="dr_label">{label}</div>
    </div>
  )
}

export default DisplayBox
